<template>
  <div class="fan-input-design">
    <Form ref="obj" :model="obj" :rules="rules">
      <div
        class="de mt-20"
        v-for="(item, index) in elementData.options"
        :key="index"
      >
        <p class="title">{{ item.label }}</p>
        <Row :gutter="20">
          <Col
            :span="!it.isRow ? 12 : 24"
            class="zujian"
            v-for="(it, ins) in item.children"
            :key="ins"
          >
            <!-- 默认input -->
            <FormItem v-if="!it.type" :label="it.label + '：'">
              <Input
                type="text"
                v-model="it.value"
                @on-blur="blur"
                @on-focus="focus"
              >
              </Input>
            </FormItem>
            <!-- 下拉框 select -->
            <FormItem v-if="it.type == 'select'" :label="it.label + '：'">
              <Select
                v-model="it.value"
                clearable
                @on-change="(val) => changeSel(val, it)"
              >
                <Option
                  v-for="item in it.options"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.label }}</Option
                >
              </Select>
            </FormItem>
          </Col>
        </Row>
      </div>
    </Form>
  </div>
</template>

<script>
export default {
  name: "fan-input-design",
  props: {
    // 数据参数
    elementData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      obj: {},
      rules: {},
    };
  },

  mounted() {},

  methods: {
    // input失焦
    blur() {
      this.$emit("setFocus", false);
    },
    // 聚焦
    focus() {
      this.$emit("setFocus", true);
    },
    // 下拉框选择
    changeSel(val, item) {
      item.extraValue = item.options?.find((it) => it.value == val)?.extraValue;
    },
  },
};
</script>

<style lang="scss" scoped>
.fan-input-design ::v-deep {
  .ivu-form {
    .zujian {
      .ivu-form-item {
        margin-bottom: 0 !important;
      }
    }
  }
}
</style>
